<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        body{
            background: #1b1b1b;
        }

        .checkbox-wrapper{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .checkmark{
            display: block;
            width: 80px;
            height: 80px;
            background-color: white;
            position: relative;
            transition: background-color .4s;
            overflow: hidden;
            border-radius: 50%;
        }

        #check:checked ~ .checkmark{
            background-color: #18d37d;
        }

        .checkmark::after{
            content: '';
            position: absolute;
            width: 25px;
            height: 45px;
            border-right: 5px solid white;
            border-bottom: 5px solid white;
            top:40%;
            left:50%;
            transform: translate(-50%, -50%) rotateZ(40deg);
            opacity: 0;
            transition: all .4s;
        }

        #check:checked ~ .checkmark::after{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="checkbox-wrapper">
        <input type="checkbox" id="check" hidden/>
        <label for="check" class="checkmark"></label>
    </div>
</body>
</html>